/*
 * @Author: Jim <jimjiang0909@gmail.com>
 * @Create time:   2016-06-16 14:56:28
 * @Last Modified by:   Jim
 * @Last Modified time: 2016-08-02 11:50:51
 * @File Name: forgotPassword.js
 */

'use strict';

import React, {
    Component
} from 'react';
import {
    View,
    Text,
    TextInput,
    StyleSheet,
    TouchableOpacity,
    ActivityIndicator,
    Alert,
} from 'react-native';

import Login from './login';

export default class forgotPassword extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            ajax: false,
            activeOpacity: 1,
        };
    }

    shouldComponentUpdate(props, states) {
       let color = '#999', activeOpacity = 1;
        if (states.email) {
            color = '#3FAFE4', activeOpacity = 0;
        }
        this.refs.button.setNativeProps({ style: { backgroundColor: color } });
        states.activeOpacity = activeOpacity;
        return true;

    }

    render() {
        return (
            <View style={styles.container} onStartShouldSetResponder={() => this.containerTouched() }>
                <View style={styles.body}>
                    <View>
                        <Text suppressHighlighting={true} style={styles.des}>{Lang.forgotPassword_des}</Text>
                    </View>
                    <View>
                        <TextInput
                            style={styles.input}
                            placeholder={Lang.forgotPassword_usernameOrEmail}
                            clearButtonMode={'while-editing'}
                            autoCorrect={false}
                            autoCapitalize = {"none"}
                            ref='email'
                            onChangeText={(email) => { this.setState({ email: email }) } }
                            />
                    </View>
                    <TouchableOpacity activeOpacity={this.state.activeOpacity} onPress={() => this.sendData() }>
                        <View style={styles.btn} ref='button'>
                            {this.state.ajax ?
                            <ActivityIndicator
                                animating={true}
                                style={styles.centering}
                                size={'small'}
                                color='#fff'
                                />
                                : <Text suppressHighlighting={true} style={styles.submit} >{Lang.forgotPassword_send}</Text>}
                        </View>
                    </TouchableOpacity>
                    <View style={styles.signIn}>
                        <TouchableOpacity onPress={() => this.gotoLogin() }>
                            <Text suppressHighlighting={true} style={styles.signInText}>{Lang.forgotPassword_signIn}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }


    gotoLogin() {
        Utils.navJumpTo(this.props.navigator, {
            name: 'Login',
            component: Login,
            title: Lang.forgotPassword_login
        });
    }

    containerTouched(event) {
        this.refs.email.blur();
    }

    sendData() {
        let tthis = this;
        tthis.containerTouched();
        if (tthis.state.ajax) return;
        tthis.setState({ ajax: true });
        if (tthis.state.email) {
            Share.fetchMain({
                url: 'forget_password',
                data: tthis.state,
                callback: function () {
                    tthis.setState({ ajax: false });
                    Alert.alert('', Lang.forgotPassword_tips);
                }
            })
        } else {
            tthis.setState({ ajax: false });
        }
    }
}

const styles = StyleSheet.create(Css.ForgotPasswordStyle);